<template>
  <div id = "watch1">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
    <p id="info"></p>
    <!--<watch11></watch11>-->
    <!--<watch12></watch12>-->
    <router-link to="watch11">watch11</router-link>
    <router-link to="watch12">watch12</router-link>

  </div>
</template>

<script>




  export default  {
        name: "watch1",
      data(){
        return{
          Kilometers0:this.kilometers,
          kilometers : 0,
          meters:0
        }
      },
      methods: {
      },
      computed :{
      },
      watch : {
        kilometers:function(newValue,oldValue) {

          this.kilometers = newValue;
          this.meters = this.kilometers * 1000
        },
        meters : function (val) {
          this.kilometers = val/ 1000;
          this.meters = val;
        }
      },watch:{
        kilometers:function(newValue,oldValue) {
          // 这个回调将在 vm.kilometers 改变后调用
          document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
        }
      }
    }



</script>

